<template>
  <a-layout class="allLayout">
    <a-layout-content>
      <unit-table
        ref="approvalable"
        :columns="this.$staticMenu.roleListColumns"
        :size="pageSize"
        :sizeOptions="pageSizeOptions"
        :type="tableType"
        :url="tableUrl"
        rowKeyName="id"
        @onSelect="tableOnSelect"
      >
        <!-- 补充表格操作 -->
        <div slot='tableAct' class="actionBtn">
          <a-button type="primary" @click="addRole">
            <a-icon type="plus"/>
            添加
          </a-button>
        </div>
        <span slot="departmentName" slot-scope="props">
          <span>{{(props.record.systemMenu.toString()).replace( /[S][0-9a-zA-Z]{3}/g,'')}}</span>
        </span>
        <!-- end -->
        <span slot="roleName" slot-scope="props">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{props.record.description}}</span>
              </template>
              <span class="ellipsis">{{props.record.description}}</span>
            </a-tooltip>
        </span>
        <!-- 补充表格每行的操作 -->
        <span slot="tableRowAct" slot-scope="props">
					<a @click="editRole(props.record)" v-if="props.record.isDefault=='0'">
						<span class="ant-tag ant-tag-blue">
							<a-icon type="form"/> 修改
						</span>
					</a>
					<a-divider type="vertical"/>
					<a @click="deleteRole(props.record)" v-if="props.record.isDefault=='0'">
						<span class="ant-tag ant-tag-volcano">
							<a-icon type="delete"/> 删除
						</span>
					</a>
				</span>
      </unit-table>
      <modal
        ref="roleModalForm"
        :title="modalTitle"
        :visible="modalVisible"
        :readonly="isWrite"
        :roleId="recordId"
        @cancel="handleCancel"
        @ok="handleOk"
      >
      </modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import {GETALLROLE,DELETEROLE} from '@/../static/js/apis.js'
  import unitTable from "@/common/table"
  import modal from "./components/roleModal"
  import _ from "lodash" //引入lodash：封装了诸多对字符串，数组，对象等常见数据类型的处理函数
  export default {
    inject: ['reload'],                                 //注入App里的reload方法
    name: 'approval',
    components: {
      unitTable,
      modal
    },
    data() {
      return {
        tableSelectedKeys: [],
        tableUrl: GETALLROLE.url,  //调用表格组件，必须参数，后台数据接口
        tableType: GETALLROLE.type,  //调用表格组件，必须参数，后台方法方法（get，post）
        pageSize: 15,
        pageSizeOptions: ['15', '20', '40'],
        /*modal参数*/
        modalTitle: '',     //modal标题
        modalVisible: false,    //modal关闭打开控制器
        isWrite:'',
        recordId:''
      }
    },
    methods: {
      /*表格checkbox选中事件*/
      tableOnSelect(selectedRowKeys, selectedRows) {
        this.tableSelectedKeys = selectedRowKeys
      },
      addRole() {
        this.modalTitle = "添加角色"
        this.modalVisible = true
        this.isWrite=false
      },
      editRole(record) {
        let self=this
        self.modalTitle = "修改角色"
        self.modalVisible = true
        if(record.isDefault=='1'){
            self.isWrite=true
        }else{
           self.isWrite=false
        }
        self.recordId=record.id
        const pickArr = ['roleName', 'systemMenu', 'description']
        const formShowInfo = _.pick(record, pickArr)
        //把数据放入modal，要在form加载完成后
         self.$nextTick(() => {
            self.$refs.roleModalForm.form.setFieldsValue(formShowInfo)
         })
      },
      deleteRole(record) {
        let self=this
        let param={
          id:record.id
        }
        self.$confirm({
          title: '确定要删除该角色吗？',
          content: '删除后该角色将不可恢复，点击“ 确定 ”按钮删除该角色，确认框关闭。',
          onOk () {
            DELETEROLE(param, function(res){
                if(res.code=='200'){
                  self.$message.success('角色删除成功！')
                  self.reload()
                }else{
                  self.$message.error(res.message)
                }
            })
          }
        })
      },
      /*modal确定事件*/
      handleOk(e) {
        this.modalVisible = false
      },
      /*modal取消事件*/
      handleCancel(e) {
        this.modalVisible = false
      }

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allLayout {
    margin: 30px;
  }

  .ant-layout-content {
    background-color: white;
  }

  .actionBtn button:not(:last-child),
  .ant-row button:not(:last-child) {
    margin-right: 20px;
  }

  .action {
    color: #1890ff
  }
</style>
